<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>首页界面</title>
  <link rel="stylesheet" href="css/base3.css" />
</head>

<body>
  <!-- <div id="show">1</div> -->
  <!--顶部-->
  <header class="header left">
    <div class="left nav">
      <ul>
        <li class="nav_active">
          <i class="nav_1"></i><a href="index.html">空气质量分析</a>
        </li>
        <li><i class="nav_2"></i><a href="yuce.html">AQI预测</a></li>
        <li><i class="nav_3"></i><a href="evaluate.html">评价与反馈</a></li>
      </ul>
    </div>
    <div class="header_center left">
      <h2><strong>全国空气质量数据分析和可视化</strong></h2>
      <p class="color_font">
        <small>National Air Quality Data Analysis and Visualization</small>
      </p>
    </div>
    <div class="showTime"></div>

    </div>
    <script>var t = null;
      t = setTimeout(time, 1000);   //开始运行
      function time() {
        clearTimeout(t); //清楚计时器
        dt = new Date()
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日 ' + h + '时' + m + '分' + s + '秒'
      }
    </script>
  </header>
  <!--内容部分-->
  <div class="con left">
    <div class="con_div">
      <a class="con_div_text left" href="index.html">
        <img src="img/烟花爆竹.png" class="left text01_img" />
        <div class="left text01_div">
          <p>春节期间是否可以燃放烟花爆竹？</p>
          <p>不建议燃放</p>
        </div>
      </a>
      <a class="con_div_text left" href="car.html">
        <img src="img/汽车.png" class="left text01_img" />
        <div class="left text01_div">
          <p>是否建议增加使用新能源汽车？</p>
          <p>建议增加</p>

        </div>
      </a>
      <a class="con_div_text left active" href="weather.html">
        <img src="img/雾霾.png" class="left text01_img" />
        <div class="left text01_div">
          <p>随着政策改革雾霾天气情况是否变好？</p>
          <p>明显变佳</p>
        </div>
      </a>
    </div>

    <!--统计分析图-->
    <div class="div_any">
      <div class="left div_any01">
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_1.png" />雾霾的成分占比
          </div>
          <p id="char1" class="p_chart"></p>
        </div>
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_2.png" />污染气体总体概述
          </div>
          <!-- <p id="char2" class="p_chart"></p> -->
          <div class="box">

            <ul class="drqk clearfix">
              <li>
                <div class="li1">
                  <div class="icon">45<br>ug/m3</br></div>
                  <div>
                    <span>同比
                      <img src="img/下降.png">
                    </span>
                    <p><em>2.2%</em></p>
                  </div>
                </div>
                <div class="li2">PM2.5平均浓度</div>
              </li>
              <li>
                <div class="li1">
                  <div class="icon">18<br>ug/m3</br></div>
                  <div>
                    <span>同比
                      <img src="img/下降.png">
                    </span>
                    <p><em>35.7%</em></p>
                  </div>
                </div>
                <div class="li2">NO2平均浓度</div>
              </li>
              <li>
                <div class="li1">
                  <div class="icon">1.1<br>mg/m3</br></div>
                  <div>
                    <span>同比
                      <img src="img/持平.png">
                    </span>
                    <p><em>0.0%</em></p>
                  </div>
                </div>
                <div class="li2">CO日均值第95百分位浓度</div>
              </li>
              <li>
                <div class="li1">
                  <div class="icon">64<br>ug/m3</br></div>
                  <div>
                    <span>同比
                      <img src="img/下降.png">
                    </span>
                    <p><em>8.6%</em></p>
                  </div>
                </div>
                <div class="li2">PM10平均浓度</div>
              </li>
              <li>
                <div class="li1">
                  <div class="icon">9<br>ug/m3</br></div>
                  <div>
                    <span>同比
                      <img src="img/下降.png">
                    </span>
                    <p><em>10.0%</em></p>
                  </div>
                </div>
                <div class="li2">SO2平均浓度</div>
              </li>
              <li>
                <div class="li1">
                  <div class="icon">99<br>ug/m3</br></div>
                  <div>
                    <span>同比
                      <img src="img/下降.png">
                    </span>
                    <p><em>4.8%</em></p>
                  </div>
                </div>
                <div class="li2">O3最大8小时平均第90百分位浓度</div>
              </li>
            </ul>

          </div>
        </div>
      </div>
      <div class="left div_any02">
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_1.png" />雾霾严重城市PM2.5分析
          </div>
          <!-- <p id="char3" class="p_chart"></p>  -->
          <div class="table_p" id="bj">
            <div>
              <button onclick="showTable('bj')">北京<botton>
                  <button onclick="showTable('tj')">天津<botton>
                      <button onclick="showTable('sjz')">石家庄<botton>
                          <button onclick="showTable('nj')">南京<botton>
                              <button onclick="showTable('hf')">合肥<botton>
            </div>
            <div id="bj-tbody" class="p_chart1">

            </div>
          </div>
          <div class="table_p" id="tj">
            <div>
              <button onclick="showTable('bj')">北京<botton>
                  <button onclick="showTable('tj')">天津<botton>
                      <button onclick="showTable('sjz')">石家庄<botton>
                          <button onclick="showTable('nj')">南京<botton>
                              <button onclick="showTable('hf')">合肥<botton>
            </div>
            <div id="tj-tbody" class="p_chart1">

            </div>
          </div>
          <div class="table_p" id="sjz">
            <div>
              <button onclick="showTable('gy')">北京<botton>
                  <button onclick="showTable('ran')">天津<botton>
                      <button onclick="showTable('sjz')">石家庄<botton>
                          <button onclick="showTable('nj')">南京<botton>
                              <button onclick="showTable('hf')">合肥<botton>
            </div>
            <div id="sjz-tbody" class="p_chart1">

            </div>
          </div>
          <div class="table_p" id="nj">
            <div>
              <button onclick="showTable('gy')">北京<botton>
                  <button onclick="showTable('ran')">天津<botton>
                      <button onclick="showTable('sjz')">石家庄<botton>
                          <button onclick="showTable('nj')">南京<botton>
                              <button onclick="showTable('hf')">合肥<botton>
            </div>
            <div id="nj-tbody" class="p_chart1">

            </div>
          </div>
          <div class="table_p" id="hf">
            <div>
              <button onclick="showTable('gy')">北京<botton>
                  <button onclick="showTable('ran')">天津<botton>
                      <button onclick="showTable('sjz')">石家庄<botton>
                          <button onclick="showTable('nj')">南京<botton>
                              <button onclick="showTable('hf')">合肥<botton>
            </div>
            <div id="hf-tbody" class="p_chart1">
            </div>
          </div>
        </div>
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_2.png" />雾霾中主要污染源分析
          </div>
          <!-- <p id="char4" class="p_chart"></p> -->
          <div class="table_p" id="gy">
            <div>
              <button onclick="showTable1('gy')">工业排放<botton>
                  <button onclick="showTable1('ran')">燃烧供暖<botton>
                      <button onclick="showTable1('lj')">焚烧垃圾<botton>
            </div>
            <div id="gy-tbody" class="p_chart1">

            </div>
          </div>
          <div class="table_p" id="ran">
            <div>
              <button onclick="showTable1('gy')">工业排放<botton>
                  <button onclick="showTable1('ran')">燃烧供暖<botton>
                      <button onclick="showTable1('lj')">焚烧垃圾<botton>
            </div>
            <div id="ran-tbody" class="p_chart1">

            </div>
          </div>
          <div class="table_p" id="lj">
            <div>
              <button onclick="showTable1('gy')">工业排放<botton>
                  <button onclick="showTable1('ran')">燃烧供暖<botton>
                      <button onclick="showTable1('lj')">焚烧垃圾<botton>
            </div>
            <div id="lj-tbody" class="p_chart1">

            </div>
          </div>
        </div>
      </div>
      <div class="left div_any01">
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_5.png" />空气质量佳的城市
          </div>
          <div class="p_chart2">
            <img src="img/good1.png" class="slide-image" />
            <img src="img/good2.png" class="slide-image" />
            <img src="img/good3.png" class="slide-image" />
            <img src="img/good4.png" class="slide-image" />
          </div>
        </div>
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_5.png" />空气质量差的城市
          </div>
          <div class="p_chart2">
            <img src="img/bad1.png" class="slide-image1" />
            <img src="img/bad2.png" class="slide-image1" />
            <img src="img/bad3.png" class="slide-image1" />
            <img src="img/bad4.png" class="slide-image1" />
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="js/jquery/jQuery-2.2.0.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <script src="js/base.js"></script>
  <script src="js/weather.js"></script>

</body>

</html>